.eight .shape.a {
    transform: translateX(-6em);
    animation: eight-shape-a 4s infinite cubic-bezier(.57,-0.5,.43,1.53);
}
.eight .shape.b {
    top: calc(50% + 6em);
    opacity: 0;
    animation: eight-shape-b 4s infinite linear;
}
.eight .shape.c {
    transform: translateX(6em);
    animation: eight-shape-c 4s infinite cubic-bezier(.57,-0.5,.43,1.53);
}
@keyframes eight-shape-a {
    0%, 50% {
        transform: translateX(-5.5em);
    }
    70%, 100% {
        transform: translateX(-10em);
    }
}
@keyframes eight-shape-b {
    0% {
        transform: none;
    }
    20%, 30% {
        transform: translateY(-1.5em);
        opacity: 1;
        animation-timing-function: cubic-bezier(.57,-0.5,.43,1.53);
    }
    32% {
        transform: translateY(-1.25em);
        opacity: 1;
    }
    34% {
        transform: translateY(-1.75em);
        opacity: 1;
    }    
    36%, 38% {
        transform: translateY(-1.25em);
        opacity: 1;
    }    
    42%, 60% {
        transform: translateY(-1.5em);
        opacity: 1;
    } 
    75%, 100% {
        transform: translateY(-8em);
        opacity: 1;
    } 
}
@keyframes eight-shape-c {
    0%, 50% {
      transform: translateX(5.5em);
    }
    70%, 100% {
      transform: translateX(10em);
    }
}